<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>伴程应用 - 原型导航</title>
        <link href="./css/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
        <style>
            body {
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                background-color: #f0f2f5;
            }
            .prototype-container {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 30px;
                padding: 20px;
            }
            .iphone-frame {
                width: 390px;
                height: 844px;
                border-radius: 40px;
                overflow: hidden;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                background-color: white;
                position: relative;
            }
            iframe {
                width: 100%;
                height: 100%;
                border: none;
            }
            .category-header {
                width: 100%;
                padding: 10px 0;
                margin-top: 30px;
                border-bottom: 2px solid #4299e1;
            }
            .page-title {
                position: absolute;
                bottom: -40px;
                left: 0;
                width: 100%;
                text-align: center;
                font-size: 14px;
                font-weight: bold;
                color: #4a5568;
            }
            .priority-badge {
                position: absolute;
                top: -15px;
                right: -15px;
                width: 30px;
                height: 30px;
                background-color: #4299e1;
                color: white;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: bold;
                font-size: 14px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            }
        </style>
    </head>
    <body>
        <header class="bg-blue-600 text-white p-4 shadow-md">
            <div class="container mx-auto">
                <h1 class="text-2xl font-bold">伴程应用 - 高保真UI原型</h1>
                <p class="text-sm mt-1">专为准爸爸/新手爸爸设计的孕育陪伴应用</p>
            </div>
        </header>

        <div class="container mx-auto py-6">
            <div class="mb-6 bg-white rounded-lg shadow-md p-4">
                <h2 class="text-xl font-bold mb-2">原型导航说明</h2>
                <p class="mb-2">本页面展示了伴程应用的所有原型页面，按功能优先级排序。</p>
                <p class="mb-2">
                    <span class="inline-block bg-blue-600 text-white rounded-full w-6 h-6 text-center mr-1">1</span> -
                    第一优先级：基础页面（必要框架）<br />
                    <span class="inline-block bg-green-600 text-white rounded-full w-6 h-6 text-center mr-1">2</span> -
                    第二优先级：孕期功能<br />
                    <span class="inline-block bg-yellow-500 text-white rounded-full w-6 h-6 text-center mr-1">3</span> -
                    第三优先级：产后页面<br />
                    <span class="inline-block bg-purple-500 text-white rounded-full w-6 h-6 text-center mr-1">4</span> -
                    第四优先级：备孕期页面<br />
                </p>
            </div>

            <!-- 第一优先级：基础页面 -->
            <h2 class="category-header text-xl font-bold text-blue-600">第一优先级：基础页面（必要框架）</h2>
            <div class="prototype-container">
                <div class="relative mb-10">
                    <div class="priority-badge bg-blue-600">1</div>
                    <div class="iphone-frame">
                        <iframe src="index.html" title="应用首页"></iframe>
                    </div>
                    <div class="page-title">index.html - 应用首页</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-blue-600">1</div>
                    <div class="iphone-frame">
                        <iframe src="binding.html" title="账号绑定"></iframe>
                    </div>
                    <div class="page-title">binding.html - 账号绑定</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-blue-600">1</div>
                    <div class="iphone-frame">
                        <iframe src="home.html" title="主页/仪表盘"></iframe>
                    </div>
                    <div class="page-title">home.html - 主页/仪表盘</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-blue-600">1</div>
                    <div class="iphone-frame">
                        <iframe src="profile.html" title="个人中心"></iframe>
                    </div>
                    <div class="page-title">profile.html - 个人中心</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-blue-600">1</div>
                    <div class="iphone-frame">
                        <iframe src="settings.html" title="设置"></iframe>
                    </div>
                    <div class="page-title">settings.html - 设置</div>
                </div>
            </div>

            <!-- 第二优先级：孕期功能 -->
            <h2 class="category-header text-xl font-bold text-green-600">第二优先级：孕期功能（核心应用场景）</h2>
            <div class="prototype-container">
                <div class="relative mb-10">
                    <div class="priority-badge bg-green-600">2</div>
                    <div class="iphone-frame">
                        <iframe src="pregnancy_tracker.html" title="孕期追踪"></iframe>
                    </div>
                    <div class="page-title">pregnancy_tracker.html - 孕期追踪</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-green-600">2</div>
                    <div class="iphone-frame">
                        <iframe src="prenatal_care.html" title="产检管理"></iframe>
                    </div>
                    <div class="page-title">prenatal_care.html - 产检管理</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-green-600">2</div>
                    <div class="iphone-frame">
                        <iframe src="fetal_development.html" title="胎儿发育"></iframe>
                    </div>
                    <div class="page-title">fetal_development.html - 胎儿发育</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-green-600">2</div>
                    <div class="iphone-frame">
                        <iframe src="emergency_guide.html" title="紧急指南"></iframe>
                    </div>
                    <div class="page-title">emergency_guide.html - 紧急指南</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-green-600">2</div>
                    <div class="iphone-frame">
                        <iframe src="support_guide.html" title="支持指南"></iframe>
                    </div>
                    <div class="page-title">support_guide.html - 支持指南</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-green-600">2</div>
                    <div class="iphone-frame">
                        <iframe src="pregnancy_preparation.html" title="待产准备"></iframe>
                    </div>
                    <div class="page-title">pregnancy_preparation.html - 待产准备</div>
                </div>
            </div>

            <!-- 第三优先级：产后页面 -->
            <h2 class="category-header text-xl font-bold text-yellow-500">第三优先级：产后页面（重要应用场景）</h2>
            <div class="prototype-container">
                <div class="relative mb-10">
                    <div class="priority-badge bg-yellow-500">3</div>
                    <div class="iphone-frame">
                        <iframe src="newborn_care.html" title="新生儿护理"></iframe>
                    </div>
                    <div class="page-title">newborn_care.html - 新生儿护理</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-yellow-500">3</div>
                    <div class="iphone-frame">
                        <iframe src="mother_care.html" title="产妇关怀"></iframe>
                    </div>
                    <div class="page-title">mother_care.html - 产妇关怀</div>
                </div>

                <!-- 其他产后页面 -->
                <div class="relative mb-10">
                    <div class="priority-badge bg-yellow-500">3</div>
                    <div class="iphone-frame">
                        <iframe src="depression_warning.html" title="抑郁预警"></iframe>
                    </div>
                    <div class="page-title">depression_warning.html - 抑郁预警</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-yellow-500">3</div>
                    <div class="iphone-frame">
                        <iframe src="feeding_guide.html" title="喂养指南"></iframe>
                    </div>
                    <div class="page-title">feeding_guide.html - 喂养指南</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-yellow-500">3</div>
                    <div class="iphone-frame">
                        <iframe src="sleep_solutions.html" title="睡眠解决方案"></iframe>
                    </div>
                    <div class="page-title">sleep_solutions.html - 睡眠解决方案</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-yellow-500">3</div>
                    <div class="iphone-frame">
                        <iframe src="family_management.html" title="家庭管理"></iframe>
                    </div>
                    <div class="page-title">family_management.html - 家庭管理</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-yellow-500">3</div>
                    <div class="iphone-frame">
                        <iframe src="father_interaction.html" title="父婴互动"></iframe>
                    </div>
                    <div class="page-title">father_interaction.html - 父婴互动</div>
                </div>
            </div>

            <!-- 第四优先级：备孕期页面 -->
            <h2 class="category-header text-xl font-bold text-purple-500">第四优先级：备孕期页面（前期准备阶段）</h2>
            <div class="prototype-container">
                <div class="relative mb-10">
                    <div class="priority-badge bg-purple-500">4</div>
                    <div class="iphone-frame">
                        <iframe src="fertility_guide.html" title="备孕指南"></iframe>
                    </div>
                    <div class="page-title">fertility_guide.html - 备孕指南</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-purple-500">4</div>
                    <div class="iphone-frame">
                        <iframe src="male_health.html" title="男性备孕"></iframe>
                    </div>
                    <div class="page-title">male_health.html - 男性备孕</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-purple-500">4</div>
                    <div class="iphone-frame">
                        <iframe src="preparing_plan.html" title="备孕计划"></iframe>
                    </div>
                    <div class="page-title">preparing_plan.html - 备孕计划</div>
                </div>

                <div class="relative mb-10">
                    <div class="priority-badge bg-purple-500">4</div>
                    <div class="iphone-frame">
                        <iframe src="environment_check.html" title="环境优化"></iframe>
                    </div>
                    <div class="page-title">environment_check.html - 环境优化</div>
                </div>
            </div>
        </div>

        <footer class="bg-gray-800 text-white py-4 mt-8">
            <div class="container mx-auto text-center">
                <p>伴程应用高保真UI原型 &copy; 2025</p>
            </div>
        </footer>
    </body>
</html>
